<!-- 巡检过程 -->
<template>
	<view>
		<view class="no-warpper" v-if="isLong">
			<view v-if="hasInfo">
				<view class="scroll-box">
					<view class="item" v-for="(item,index) in patrolList" :key="index"
						:class="item.patrolType == '20002' ? 'on' : ''">
						<view class="left" :class="hasInspectionTime ? 'has' : ''">
							<text>{{item.date}}</text>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="center">
							<view class="spot"></view>
							<view class="line"></view>
						</view>
						<view class="right nl-shadow-box" :class="item.patrolType == '10001' ? 'normal' : ''">
							<view class="title">
								<text class="text">{{item.inspectionName}}</text>
								<view class="partrol-state">
									<view class="icon" v-if="item.patrolType"></view>
									<text>{{item.patrolTypeName}}</text>
								</view>
							</view>
							<view class="content">
								<view class="handle">
									<view class="text">{{item.description}}</view>
									<!-- 查看图片 -->
									<previewImage :pictures="item.photos"></previewImage>
								</view>
								<view class="botton" v-if="!item.patrolType" @click="startPatrol(item)">开始巡检</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>
			<!-- 无数据 渲染缺省图 -->
			<view v-if="hasInfo == false">
				<noData :noDataText="noDataText"></noData>
			</view>
		</view>

		<view v-else>
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>
	</view>

</template>

<script>
	import {
		getListInspectionTaskDetails
	} from 'api/patrol';
	import {
		IMG_URL
	} from '@/utils/request.js'
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				imgArr: [],

				taskId: '',

				listBox: [], // 避免上拉刷新时，页面出现空白
				patrolList: [],
				
				hasInspectionTime:false, // 是否有巡检过任务，用来判断页面的样式
				
				page: 1,
				records: 0,
				status: 'loadmore',

				isLong: false, // 是否加载完成
				hasNet: true, // 是否有网络
				hasInfo: '', // 是否有数据
				noDataText: '暂无数据~',
			}
		},
		onLoad(option) {
			console.log('option', option)
			this.taskId = option.taskId
			this.page = 1
			this.records = 0
			this.listBox = []
			this.getPatrolProcess(1)
			
			uni.$on('refresh', () => {
				this.page = 1
				this.records = 0
				this.listBox = []
				this.getPatrolProcess(1)
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.records = 0
			this.listBox = []
			this.getPatrolProcess(1)
		},
		// 上拉加载
		onReachBottom() {
			console.log('页面触底了')
			if (this.status == 'loading') { // 防止多次触发

			} else {
				this.status = 'loading'
				if (this.page <= this.records) {
					this.getPatrolProcess(this.page)
				} else {
					this.status = 'nomore'
				}
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			/**
			 * 获取巡检详情
			 */
			getPatrolProcess(page) {
				let that = this
				let data = {
					communityId: this.userCommunity.communityId,
					taskId: that.taskId,
					page: page,
					row: 100
				}
				getListInspectionTaskDetails(data).then((res) => {
					console.log('getListInspectionTaskDetails', res)
					if (res.records == 0) { //暂无数据
						that.hasInfo = false
						that.isLong = true
						uni.hideLoading()
						uni.stopPullDownRefresh()
						return
					}
					
					that.records = res.records
					if (that.records == that.page) {
						that.status = 'nomore'
					} else {
						that.status = 'loadmore'
					}
					that.page++
					uni.stopPullDownRefresh()
					
					for (let patrolList of res.inspectionTaskDetails) {
						if (patrolList.hasOwnProperty('photos')) {
							let imgArr = []
							for (let img of patrolList.photos) {
								let _url = String(IMG_URL)
								// _url = _url.slice(0, _url.length - 1) // 因为当前页面后台返回的图片 第一个字符是/,所以去掉IMG_URL最后一位（/）
								img.url = _url + img.url
								imgArr.push(img.url)
							}
							patrolList.photos = imgArr
						}
						
						if(patrolList.hasOwnProperty('inspectionTime')){
							that.hasInspectionTime = true
							patrolList['date'] = patrolList.inspectionTime.slice(0,10)
							patrolList['time'] = patrolList.inspectionTime.slice(11,19)
						}
						
						that.listBox.push(patrolList)
					}
					that.patrolList = that.listBox
					that.isLong = true
					that.hasInfo = true
				}).catch(function(reason) {
					uni.stopPullDownRefresh()
					// 处理网络错误
					that.hasNet = false
					that.isLong = false
				})
			},
			/**
			 * 巡检按钮
			 */
			startPatrol(item) {
				item = JSON.stringify(item)
				uni.navigateTo({
					url:`../performInspection/performInspection?item=${item}`
				})
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.page = 1
				this.records = 0
				this.listBox = []
				this.getListInspectionTaskDetails(1)
			}
		}
	}
</script>

<style lang="scss">
	.scroll-box {
		.item {
			display: flex;

			.left {
				padding-top: 20rpx;

				text {
					font-size: 24rpx;
					color: $nl-text-color-grey;
				}

				.time {
					text-align: right;
				}
			}
			
			.left.has{
				width: 124rpx;
			}

			.center {
				width: 80rpx;
				height: initial;
				display: flex;
				justify-content: center;
				position: relative;
				padding-top: 38rpx;

				.spot {
					width: 25rpx;
					height: 25rpx;
					background-color: #FFFFFF;
					border-radius: 100rpx;
					border: 4rpx solid $uni-color-primary;
					box-shadow: 0 2rpx 4rpx rgba(21, 133, 252, 0.5);
					position: relative;
					z-index: 2;
				}

				.line {
					width: 1rpx;
					height: 100%;
					background-color: #AFAFAF;
					position: absolute;
					top: 0;
					left: calc(50% - 1rpx);
				}
			}

			.right {
				flex: 1;
				padding: 24rpx 32rpx;
				margin-bottom: 32rpx;

				.title {
					display: flex;
					align-items: center;

					.partrol-state {
						margin-left: auto;
						display: flex;
						align-items: center;

						.icon {
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
							background-image: url(../../../../static/i-xjzc.png);
							background-size: 100% 100%;
							background-repeat: no-repeat;
						}

						text {
							font-size: $uni-font-size-sm;
							color: $uni-color-primary;
						}
					}
				}

				.content {
					margin-top: 20rpx;

					.text {
						font-size: $uni-font-size-sm;
					}
				}

				.botton {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					margin-top: 20rpx;
					text-align: center;
					border: 2rpx solid #1585FC;
					color: #1585FC;
					border-radius: 4rpx;
					background-color: #FFFFFF;
					font-size: $uni-font-size-sm;
				}

				.botton:active {
					background-color: rgba(21, 133, 252, .1);
				}
			}
		}

		.item:first-of-type {
			.line {
				height: calc(100% - 38rpx);
				top: 38rpx;
			}
		}

		.item:last-of-type {
			.line {
				height: 38rpx;
				top: 0;
			}
		}

		.item.on {
			.right {
				border: 4rpx solid #F6635A;
			}

			.spot {
				border: 4rpx solid #F6635A;
				box-shadow: 0 2rpx 4rpx rgba(246, 99, 90, 0.5);
			}

			.partrol-state {
				.icon {
					background-image: url(../../../../static/i-xjyc.png) !important;
				}

				text {
					color: #F6635A !important;
				}
			}
		}

		.normal {
			border: 4rpx solid $uni-color-primary;
		}
	}
</style>
